<!DOCTYPE html>
<html>

<head>
	<title>文章表</title>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
	<link rel="stylesheet" href="../../css/bootstrap.min.css">
	<link rel="stylesheet" href="../../css/font-awesome.min.css">
	<link rel="stylesheet" href="../../plugins/jqgrid/ui.jqgrid-bootstrap.css">
	<link rel="stylesheet" href="../../plugins/ztree/css/metroStyle/metroStyle.css">
	<link rel="stylesheet" href="../../css/main.css">
	<script src="../../libs/jquery.min.js"></script>
	<script src="../../plugins/layer/layer.js"></script>
	<script src="../../libs/bootstrap.min.js"></script>
	<script src="../../libs/vue.min.js"></script>
	<script src="../../plugins/jqgrid/grid.locale-cn.js"></script>
	<script src="../../plugins/jqgrid/jquery.jqGrid.min.js"></script>
	<script src="../../plugins/ztree/jquery.ztree.all.min.js"></script>
	<script src="../../js/common.js"></script>


	<link href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">
	<link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
	<script src="./custom-elem.js"></script>
	<!-- <script src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"></script> -->
	<script src="./wangeditor-min.js"></script>

	<style>
		.panel-default {
			display: none;
		}

		.editor4 {
			display: none;
			padding: 20px 10px;
			height: 300px;
			width: 500px;
			word-break: break-all;
			word-wrap: break-word;
			overflow: scroll;
		}

		video {
			width: 300px;
			height: 100px;
		}

		img {
			width: 100px;
			height: 100px;
		}

		#doc {
			position: absolute;
			z-index: 200;
			opacity: 0;
			filter: alpha(opacity=0);
			width: 103px;
			height: 103px;
			left: 3%;
		}

		.fileBlob {
			width: 103px !important;
			height: 103px;
			border: 1px solid #ddd;
			z-index: 1;
		}

		.w-e-text-container {
			height: 200px !important;
		}
	</style>

</head>

<body>
	<div id="app">
		<div class="grid-primary">
			<div class="grid-btn">
				<a v-if="hasPermission('course:acarticle:save')" class="btn btn-primary" @click="add" id="addPrimary"><i
						class="fa fa-plus"></i>&nbsp;新增</a>
				<a v-if="hasPermission('course:acarticle:update')" class="btn btn-primary" @click="update"
					id="updatePrimary"><i class="fa fa-pencil-square-o"></i>&nbsp;修改</a>
				<a v-if="hasPermission('course:acarticle:delete')" class="btn btn-primary delete" id="delete"
					@click="del"><i class="fa fa-trash-o"></i>&nbsp;删除</a>
			</div>
			<table id="jqGrid"></table>
			<div id="jqGridPager"></div>
		</div>

		<div class="panel panel-default">
			<div class="panel-heading">{{title}}</div>
			<form class="form-horizontal">
				<div class="form-group">
					<div class="col-sm-2 control-label">分类id</div>
					<div class="col-sm-10">
						<input type="text" class="form-control categoryId" v-model="acArticle.categoryId"
							placeholder="分类id" />
					</div>
				</div>
				<div class="form-group">
					<div class="col-sm-2 control-label">文章封面图</div>
					<div class="col-sm-10">
						<input type="file" name="file" id="doc" style="width:103px;max-height:103px;"
							onchange="javascript:setImagePreviews();" accept="image/*" />
						<div id="dd" class="fileBlob"></div>
					</div>
				</div>
				<div class="form-group">
					<div class="col-sm-2 control-label">文章标题</div>
					<div class="col-sm-10">
						<input type="text" class="form-control title" v-model="acArticle.title" placeholder="文章标题" />
					</div>
				</div>
				<div class="form-group">
					<div class="col-sm-2 control-label">文章副标题</div>
					<div class="col-sm-10">
						<input type="text" class="form-control subtitle" v-model="acArticle.subtitle"
							placeholder="文章副标题" />
					</div>
				</div>
				<div class="form-group">
					<div class="col-sm-2 control-label">创建者</div>
					<div class="col-sm-10">
						<input type="text" class="form-control createBy" v-model="acArticle.createBy"
							placeholder="创建者" />
					</div>
				</div>
				<div class="form-group">
					<div class="col-sm-2 control-label">创建时间</div>
					<div class="col-sm-10">
						<input type="text" class="form-control createTime" v-model="acArticle.createTime"
							placeholder="创建时间" />
					</div>
				</div>
				<div class="form-group">
					<div class="col-sm-2 control-label">更新者</div>
					<div class="col-sm-10">
						<input type="text" class="form-control updateBy" v-model="acArticle.updateBy"
							placeholder="更新者" />
					</div>
				</div>
				<div class="form-group">
					<div class="col-sm-2 control-label">文章详情</div>
					<div class="col-sm-10" style="height:280px;">
						<div class="page-right editor2" ref="editor2">
							<div style="width: 600px;">
								<div id="editor-text-area" style="height: 100px;"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="form-group">
					<div class="col-sm-2 control-label"></div>
					<input type="button" class="btn btn-primary saveOrUpdate" @click="saveOrUpdate" value="确定" />
					&nbsp;&nbsp;<input type="button" class="btn btn-warning reload" @click="reload" value="返回" />
				</div>
			</form>
		</div>
	</div>


	<script>

		var isType = '';
		var fileId = '';
		dd.innerHTML += "<div style='text-align:center;line-height:103px;' > 上传封面图 </div>";
		const E = window.wangEditor
		const editor = new E('#editor-text-area')

		editor.create()
		editor.config.uploadImgShowBase64 = true
		editor.config.uploadImgServer = baseURL + 'course/acarticle/uploadImage'
		editor.config.uploadImgParams = {
			'Content-Type': 'multipart/form-data'
		}
		editor.config.uploadImgHeaders = { 'token': this.token }
		editor.config.uploadFileName = 'file'
		editor.config.uploadImgMaxSize = 1024 * 1024 * 1024
		editor.config.uploadImgMaxLength = 6
		editor.config.uploadImgTimeout = 10 * 60 * 1000
		editor.config.onchangeTimeout = 1000

		editor.config.uploadVideoServer = baseURL + 'course/acarticle/uploadVideo'
		editor.config.uploadVideoMaxSize = 1 * 1024 * 1024 * 1024
		editor.config.uploadVideoTimeout = 1000 * 60 * 5
		editor.config.uploadVideoParams = {
			'Content-Type': 'multipart/form-data'
		}
		editor.config.uploadVideoHeaders = { 'token': this.token }
		editor.config.uploadVideoName = 'file'
		editor.config.uploadVideoHooks = {
			customInsert: function (insertVideo, result) {
				if (result.msg === "success") {
					const link = result.data.url
					insertVideo(link)
					fileId = result.data.fileId;
				}
			},
		}
		
		


     
	





		$('#addPrimary').click(function () {
			$(".panel-default").show();
			$(".grid-primary").hide();
			$(".panel-heading").html('新增');
			isType = 1;
		})

		$(function () {
			$("#jqGrid").jqGrid({
				url: baseURL + 'course/acarticle/list',
				datatype: "json",
				colModel: [
					{ label: 'id', name: 'id', index: 'id', width: 50, key: true },
					{ label: '分类id', name: 'categoryId', index: 'category_id', width: 80 },
					{ label: '文章标题', name: 'title', index: 'title', width: 80 },
					{ label: '文章封面图', name: 'coverUrl', index: 'coverUrl', width: 80 },
					{ label: '文章副标题', name: 'subtitle', index: 'subtitle', width: 80 },
					{ label: '创建者', name: 'createBy', index: 'create_by', width: 80 },
					{ label: '创建时间', name: 'createTime', index: 'create_time', width: 80 },
					{ label: '更新者', name: 'updateBy', index: 'update_by', width: 80 },
					{
						label: '视频上传状态', name: 'uploadStatus', index: 'uploadStatus', width: 80, formatter: function (cellvalue, options, row) {
							if (cellvalue == 1) { return '已完成' } else { return '正在上传' }
						}
					}
				],
				viewrecords: true,
				height: 385,
				rowNum: 50,
				rowList: [10, 30, 50],
				rownumbers: true,
				rownumWidth: 25,
				autowidth: true,
				multiselect: true,
				pager: "#jqGridPager",
				jsonReader: {
					root: "page.list",
					page: "page.currPage",
					total: "page.totalPage",
					records: "page.totalCount"
				},
				prmNames: {
					page: "page",
					rows: "limit",
					order: "order"
				},
				gridComplete: function () {
					$("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x": "hidden" });
				}
			});
		});


		$('.saveOrUpdate').click(function () {
			var imgObjPreview = document.getElementById("img0");
			$(".panel-default").hide();
			if (isType == 1) {
				var data = {
					categoryId: $(".categoryId").val(),
					title: $(".title").val(),
					subtitle: $(".subtitle").val(),
					content: encodeURIComponent(editor.txt.html()),
					createBy: $(".createBy").val(),
					createTime: $(".createTime").val(),
					updateBy: $(".updateBy").val(),
					coverUrl: imgObjPreview.src,
					fileId: fileId,
				}
				$.ajax({
					type: "POST",
					url: baseURL + 'course/acarticle/save',
					contentType: "application/json",
					data: JSON.stringify(data),
					success: function (r) {
						if (r.code === 0) {
							alert('操作成功', function (index) {
								location.reload();
							});
						} else {
							alert(r.msg);
							location.reload();
						}
					},
				});

			} else {
				if ($("#jqGrid").jqGrid('getGridParam', 'selrow') == null) {
					alert('请选择一条数据');
				} else {

					var data = {
						id: $("#jqGrid").jqGrid('getGridParam', 'selrow'),
						categoryId: $(".categoryId").val(),
						title: $(".title").val(),
						subtitle: $(".subtitle").val(),
						content: encodeURIComponent(editor.txt.html()),
						createBy: $(".createBy").val(),
						createTime: $(".createTime").val(),
						updateBy: $(".updateBy").val(),
						coverUrl: imgObjPreview.src,
						fileId: fileId,
					}
					$.ajax({
						type: "POST",
						url: baseURL + 'course/acarticle/update',
						contentType: "application/json",
						data: JSON.stringify(data),
						success: function (r) {
							if (r.code === 0) {
								alert('操作成功', function (index) {
									location.reload();
								});
							} else {
								alert(r.msg);
								location.reload();
							}
						},
					});
				}
			}
		})

		$('.reload').click(function () {
			$(".panel-default").hide();
			location.reload();
		})

		$('#updatePrimary').click(function () {
			let id = $("#jqGrid").jqGrid('getGridParam', 'selrow');
			if (id == null) {
				alert('请选择一条记录')
			} else {
				$(".panel-default").show();
				$(".grid-primary").hide();
				$(".panel-heading").html('编辑');

				isType = 2;
				$.get(baseURL + "course/acarticle/info/" + $("#jqGrid").jqGrid('getGridParam', 'selrow'), function (r) {
					dd.innerHTML += "<div style='float:left;position:absolute;top: 0' > <img id='img" + 0 + "'  /> </div>";
					var imgObjPreview = document.getElementById("img0");
					$(".categoryId").attr("value", r.acArticle.categoryId);
					$(".title").attr("value", r.acArticle.title);
					$(".subtitle").attr("value", r.acArticle.subtitle);
					$(".createBy").attr("value", r.acArticle.createBy);
					$(".createTime").attr("value", r.acArticle.createTime);
					$(".updateBy").attr("value", r.acArticle.updateBy);
					editor.txt.html(decodeURIComponent(r.acArticle.content))
					imgObjPreview.src = r.acArticle.coverUrl
				});

			}
		})

		$('#delete').click(function () {
			var ids = getSelectedRows();
			if (!ids) {
				alert('请选择一条记录')
			} else {
				confirm('确定要删除选中的记录？', function () {
					$.ajax({
						type: "POST",
						url: baseURL + "course/acarticle/delete",
						contentType: "application/json",
						data: JSON.stringify(ids),
						success: function (r) {
							if (r.code == 0) {
								alert('操作成功', function (index) {
									$("#jqGrid").trigger("reloadGrid");
								});
							} else {
								alert(r.msg);
							}
						}
					});
				});
			}
		})


		function setImagePreviews(avalue) {
			var docObj = document.getElementById("doc");
			var dd = document.getElementById("dd");
			dd.innerHTML = "";
			var fileList = docObj.files;
			for (var i = 0; i < fileList.length; i++) {
				dd.innerHTML += "<div style='float:left;' > <img id='img" + i + "'  /> </div>";
				var imgObjPreview = document.getElementById("img" + i);

				if (docObj.files && docObj.files[i]) {
					imgObjPreview.style.display = 'block';
					imgObjPreview.style.width = '103px';
					imgObjPreview.style.height = '103px';
					var formData = new FormData();
					formData.append("file", docObj.files[i]);
					$.ajax({
						type: "POST",
						url: baseURL + 'course/acarticle/uploadImage',
						contentType: "multipart/form-data",
						data: formData,
						cache: false,
						processData: false,
						contentType: false,
						success: function (r) {
							imgObjPreview.src = r.data[0].url;
						},
					});
				} else {
					docObj.select();
					var imgSrc = document.selection.createRange().text;
					var localImagId = document.getElementById("img" + i);
					localImagId.style.width = "103px";
					localImagId.style.height = "103px";
					try {
						localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
						localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
					}
					catch (e) {
						alert("您上传的图片格式不正确，请重新选择!");
						return false;
					}
					imgObjPreview.style.display = 'none';
					document.selection.empty();
				}
			}
			return true;
		}



	</script>

	<!-- <script src="../../js/modules/course/acarticle.js"></script> -->



</body>

</html>